userCenter()

footerfun()



// 0. 获取元素
const emptyBox = document.querySelector('.empty')
const carBigBox = document.querySelector('.cart')
const cartListBox = document.querySelector('.cart_list')
const goodsId = window.sessionStorage.getItem('goodsId')
// 1.登录验证
const useid = window.localStorage.getItem('id')
const usetoken = window.localStorage.getItem('token')
    !id ? window.location.href = '../html/login.html' : getCartList()

// 2.请求购物车商品列表
async function getCartList() {
    const res = await pAjax({
        url: 'http://localhost:8888/cart/list',
        data: {
            id
        },
        headers: {
            authorization: token
        },
        dataType: 'json'
    })

    // 2-2.判断登录过期
    if (res.code === 401) {
        window.location.href = '../html/login.html'
        return
    }
    bindHtml(res)
}
function bindHtml(res) {
    let totalNum = 0,
        totalPrice = 0,
        totalSelect = 0
    res.cart.forEach(item => {
        if(item.is_select){
            totalNum += item.cart_number
            totalPrice += item.cart_number * item.current_price
            totalSelect++
        }
    })
    let str = `

                <div class="top-allgoods">
                    <div class="tit">
                        <em>全部商品</em>
                        <span>${ totalNum } </span>
                    </div>
                </div>
                <div class="top">
                    <input class="select_all" type="checkbox" ${ totalSelect === res.cart.length ? 'checked' : '' }> &nbsp;&nbsp;全选 
                    <span style="margin-left: 180px;">商品</span>
                    <span style="margin-left: 360px;">单价(元)</span>
                    <span  style="margin-left: 140px;">数量</span>
                    <span  style="margin-left: 150px;">小计(元)</span>
                    <span  style="margin-left: 100px;">操作</span>
                    
                </div>  
                <div class="line">
                    <a href="">乐视官方旗舰店</a>
                    
                </div>
                <p>已减:</p>
                <ul class="cart_list">`
                res.cart.forEach(item => {
                    str += `
                    <li>
                        <div class="select">
                            <input data-id="${ item.goods_id }" class="select_item" type="checkbox"  ${ item.is_select ? 'checked' : '' }>
                        </div>
                        <div class="show">
                            <img src="${ item.img_small_logo }" alt="">
                        </div>
                        <div class="title">${ item.title }</div>
                        <div class="price">${ item.current_price }</div>
                        <div class="number">
                            <button class="sub_btn" data-id="${ item.goods_id }" data-num="${ item.cart_number }">-</button>
                            <input type="text" value="${ item.cart_number }">
                            <button data-num="${ item.cart_number }" data-id="${ item.goods_id }"
                                data-max="${ item.goods_number }" class="add_btn">+</button>
                        </div>
                        <div class="subPrice">￥${ (item.current_price * item.cart_number).toFixed(2) }</div>
                        <div class="delete">
                            <button data-id="${ item.goods_id }" class="delete_btn">删除</button>
                        </div>
                    </li>
                    `
                })
                str +=
                    `
                </ul>
                <div class="bottom">
                    <input class="select_all" type="checkbox" ${ totalSelect === res.cart.length ? 'checked' : '' }>&nbsp;&nbsp;全选 
                    <span class="totalNum">
                        总计 : ${ totalNum } 件商品
                    </span>&nbsp;&nbsp;
                    <span class="totalPrice">
                        总计 : <srtong style="color:red">￥ ${ totalPrice.toFixed(2) }
                    </strong></span>
                    <div class="btns">
                        <button class="clear">清空购物车</button>
                        <button class="delAll${ totalSelect === 0 ? ' disable' : '' }">删除所有已选中</button>
                        <button class="pay ${ totalSelect === 0 ? ' disable' : '' }">结算</button>
                    </div>                               
            </div>
  `

  carBigBox.innerHTML = str
 

if(!res.cart.length){
    emptyBox.style.display = 'block'
    carBigBox.style.display = 'none'
    return
}else{
    emptyBox.style.display = 'none'
    carBigBox.style.display = 'block'
}
}



carBigBox.addEventListener('click', async e => {
    // 4-1.判断点击的是每一条信息的 复选框
    if(e.target.className === 'select_item'){
        // 需要拿到一个商品的 id
        const goodsId = e.target.dataset.id

        // 发送请求
        const res = await pAjax({
            url: 'http://localhost:8888/cart/select',
            method: 'POST',
            data: { id, goodsId },
            headers: { authorization: token },
            dataType: 'json'
          })
           // 从新请求商品列表
    if (res.code === 1) getCartList()
    }
     // 4-2. 判断点击的是全选按钮
    if (e.target.className === 'select_all') {
    // 拿到的是自己的选中状态
      const type = e.target.checked ? 1 : 0

    // 发送请求
     const res = await pAjax({
          url: 'http://localhost:8888/cart/select/all',
          method: 'POST',
         data: { id, type },
         dataType: 'json',
         headers: { authorization: token }
    })

    // 从新请求列表数据
     if (res.code === 1) getCartList()
  }


//  4-3 判断点击是删除的 按钮
if(e.target.className === 'delete_btn'){
    // 拿到商品 id
    const goodsId = e.target.dataset.id
    // 发送请求
    const res = await pAjax({
        url: 'http://localhost:8888/cart/remove',
        data: { id, goodsId },
        headers: { authorization: token },
        dataType: 'json'
      })
      // 从新请求列表数据
    if (res.code === 1) getCartList()
}   
// 4-4.判断点击的是每一条商品数量 +
if(e.target.className === 'add_btn'){
  // 拿到商品的 id
  const goodsId = e.target.dataset.id
  // 拿到目前的购买数量,点击 +1
  const num = e.target.dataset.num - 0
  // 拿到库存的数量
  const maxNum = e.target.dataset.max - 0
  // 判断,如果目前就是最大库存,那什么都不做
  if(num >= maxNum) return alert('库存已经不够')

  // 发送请求
  const res = await pAjax({
    url: 'http://localhost:8888/cart/number',
    method: 'POST',
    data: { id, goodsId, number: num + 1 },
    headers: { authorization: token },
    dataType: 'json'
  })
  // 重新渲染页面
  if(res.code === 1) getCartList()
}

// 4-5.判断点击的是每一条商品数量 -
if(e.target.className === 'sub_btn'){
  // 拿到商品 id
  const goodsId = e.target.dataset.id
  //  拿到目前的购买数量 
  const num = e.target.dataset.num - 0
  // 判断,如果当前 num <=1 ,最低数
  if(num <= 1) return alert('最少数量了')

  // 发送请求
  const res = await pAjax({
    url: 'http://localhost:8888/cart/number',
    method: 'POST',
    data: { id, goodsId, number: num - 1 },
    headers: { authorization: token },
    dataType: 'json'
  })
  if(res.code === 1) getCartList()
}

// 4-6 判断点击的是删除 所有已选中
if(e.target.className === 'delAll'){
  // 发送请求
  const res = await pAjax({
    url: 'http://localhost:8888/cart/remove/select',
    data: { id },
    dataType: 'json',
    headers: { authorization: token }
  })
  // 重新获取列表
  if(res.code === 1) getCartList()
}

if(e.target.className === 'clear'){
  const res = await pAjax({
    url: 'http://localhost:8888/cart/clear',
    data: { id },
    headers: { authorization: token },
    dataType: 'json'
  })
  if(res.code === 1) getCartList()
}

if(e.target.className === 'pay '){
  const res = pAjax({
    url: 'http://localhost:8888/cart/pay',
    method:'POST',
    data:{ id },
    headers:{ authorization:token },
    dataType: 'json'
  })
  alert("此功能暂未开通")
  window.location.href="https:www.baidu.com"
}
})

